<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>配置</title>
    <script src="/static/commonCss.js"></script>
    <script src="/static/commonJS.js"></script>

    <style>
        .el-input {
            max-width: 80%;
        }

        .el-tabs__header {
            background-color: #545c64;
        }

        .el-tabs__item {
            color: #fff;
        }

        #configTabs {
            position: fixed;
            top: 0;
            padding-top: 60px;
            width: 100%;
            max-width: 800px;
        }

        .el-divider--horizontal {
            margin: 15px 0;
        }

    </style>
</head>
<body>

<div id="app">

    <div th:replace="~{/common/menu :: menu}"></div>

    <el-dialog v-model="showAddTaskDialog" title="选择任务类型" width="80%">
        <el-select v-model="addTaskType">
            <el-option key="1" label="日常打卡"
                       value="1"></el-option>
            <el-option key="2" label="精确时间"
                       value="2"></el-option>
        </el-select>
        <div style="padding-top: 15px">
            <el-button type="primary" @click="selectTaskType">确定</el-button>
        </div>
    </el-dialog>

    <el-tabs id="configTabs"
             v-model="activeTab"
             @tab-change="tabChange"
             type="card" class="demo-tabs">
        <el-tab-pane active-class label="自动提取" name="autoWithdraw">
            <div style="width: 100%; padding-left: 10px; margin-bottom: 155px;">
                <span >登录响应报文：</span>
                <div>
                    <el-input type="textarea"
                              v-model="loginResponseBody"
                              placeholder="输入 /yonbip-ec-base/login/mobile/login/passwordLogin 请求的响应报文"
                              style="width: 80%; padding-top: 20px"
                              :autosize="{ minRows: 13, maxRows: 13 }"
                    >
                    </el-input>
                </div>
                <div style="padding-top: 30px">
                    <el-button type="primary" size="large" @click="withdrawProperty('basicInfo')">提取</el-button>
                </div>

                <el-divider></el-divider>

                <span >打卡参数：</span>
                <div>
                    <el-input type="textarea"
                              v-model="clockParamBody"
                              placeholder="输入 /yonbip-hr-tmsign/attentance/encryptSignIn 请求的请求体"
                              style="width: 80%; padding-top: 20px"
                              :autosize="{ minRows: 5, maxRows: 5 }"
                    >
                    </el-input>
                </div>
                <div style="padding-top: 30px">
                    <el-button type="primary" size="large" @click="withdrawProperty('clockParam')">提取</el-button>
                </div>
            </div>
        </el-tab-pane>

        <el-tab-pane ref="selfConfig_tab" label="自行配置" name="selfConfig">
            <div style="width: 100%; padding-left: 10px;">
                <el-form :model="form" label-width="auto" label-suffix="：" style="max-width: 600px; margin: 0 auto">
                    <el-form-item label="accessToken">
                        <el-input v-model="form.accessToken"/>
                    </el-form-item>
                    <el-form-item label="imei">
                        <el-input v-model="form.imei"/>
                    </el-form-item>
                    <el-form-item label="deviceModel">
                        <el-input v-model="form.deviceModel"/>
                    </el-form-item>
                    <el-form-item label="deviceName">
                        <el-input v-model="form.deviceName"/>
                    </el-form-item>
                    <el-form-item label="sn">
                        <el-input v-model="form.sn"/>
                    </el-form-item>
                    <el-form-item label="a00">
                        <el-input v-model="form.a00"/>
                    </el-form-item>
                    <el-form-item label="encryptedUserId">
                        <el-input v-model="form.encryptedUserId"/>
                    </el-form-item>
                    <el-form-item label="yhtAccessToken">
                        <el-input v-model="form.yhtAccessToken"/>
                    </el-form-item>
                    <el-form-item label="ytenantId">
                        <el-input v-model="form.ytenantId"/>
                    </el-form-item>
                    <el-form-item label="qzId">
                        <el-input v-model="form.qzId"/>
                    </el-form-item>
                    <el-form-item label="defaultLocale">
                        <el-input v-model="form.defaultLocale"/>
                    </el-form-item>
                    <el-form-item label="locale">
                        <el-input v-model="form.locale"/>
                    </el-form-item>
                    <el-form-item label="orgId">
                        <el-input v-model="form.orgId"/>
                    </el-form-item>
                    <el-form-item label="defaultOrg">
                        <el-input v-model="form.defaultOrg"/>
                    </el-form-item>
                    <el-form-item label="language">
                        <el-input v-model="form.language"/>
                    </el-form-item>
                    <el-form-item label="languages">
                        <el-input v-model="form.languages"/>
                    </el-form-item>
                    <el-form-item label="timezone">
                        <el-input v-model="form.timezone"/>
                    </el-form-item>
                    <el-form-item label="nFf">
                        <el-input v-model="form.nFf"/>
                    </el-form-item>
                    <el-form-item label="newArch">
                        <el-input v-model="form.newArch"/>
                    </el-form-item>
                    <el-form-item label="multilingualFlag">
                        <el-input v-model="form.multilingualFlag"/>
                    </el-form-item>
                    <el-form-item label="vercode">
                        <el-input v-model="form.vercode"/>
                    </el-form-item>
                    <el-form-item label="userAgent">
                        <el-input v-model="form.userAgent"/>
                    </el-form-item>
                </el-form>

                <div style="padding-top: 10px; padding-bottom: 155px; ">
                    <el-button type="primary" size="large" @click="submitProperty">提交</el-button>
                </div>
            </div>

        </el-tab-pane>

        <el-tab-pane label="定时打卡配置" name="jobConfig">
            <div style="width: 100%; padding-left: 10px;">
                <div>
                    是否启用自动打卡：
                    <el-switch
                            v-model="openJob"
                            inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            active-text="开启"
                            inactive-text="关闭"
                            @change="whetherOpenJob"
                    />
                </div>
                <div style="padding-bottom: 10px">之后十天自动打卡时间:</div>
                <el-table
                        :data="nextClocks"
                        border
                        highlight-current-row
                        height="200"
                        style="width: 90%">
                    <el-table-column
                            label="序号"
                            type="index"
                            width="80px">
                    </el-table-column>
                    <el-table-column
                            prop="jobTime"
                            label="执行时间">
                    </el-table-column>
                </el-table>

                <el-divider></el-divider>
                <el-divider></el-divider>
                <div style="padding-top: 30px; padding-bottom: 10px">
                    任务配置：
                    <el-button size="small" type="primary" @click="showAddTaskDialog = true">新增</el-button>
                </div>
                <el-form :model="tasks" label-width="auto"
                         :inline="true">
                    <div v-for="(task, idx) in tasks" :key="idx">
                        <el-form-item v-if="task.type == '1'"
                                      label="日常打卡"
                                      style="width: 350px"
                        >
                            <el-time-picker
                                    v-model="task.timeSection"
                                    is-range
                                    format="HH:mm"
                                    value-format="HH:mm"
                                    @change="changeTaskTime"
                                    range-separator="到"
                                    start-placeholder="在这个点之后"
                                    end-placeholder="在这个点之前"
                            />
                        </el-form-item>
                        <el-form-item v-else-if="task.type == '2'"
                                      label="精确时间"
                                      style="width: 350px"
                        >
                            <el-date-picker
                                    v-model="task.precisionDateTime"
                                    type="datetime"
                                    format="YYYY-MM-DD HH:mm"
                                    value-format="YYYY-MM-DD HH:mm"
                                    @change="changeTaskTime"
                            />
                        </el-form-item>
                        <el-form-item>
                            <el-switch
                                    v-model="task.open"
                                    inline-prompt
                                    width="60"
                                    style="--el-switch-on-color: #6a9de5; --el-switch-off-color: #e37373"
                                    active-text="启用"
                                    inactive-text="关闭"
                            />
                        </el-form-item>
                        <el-form-item v-if="task.type == '1'" style="width: 100px">
                            <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    :content="task.mode == '1' ? '自动获取节假日，仅在工作日打卡' : '仅只在周一至周五打卡，无视节假日'"
                                    placement="top-start"
                            >
                                <el-switch
                                        v-model="task.mode"
                                        inline-prompt
                                        :active-value="1"
                                        :inactive-value="2"
                                        width="110"
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #6a9de5"
                                        active-text=  "工作日"
                                        inactive-text="仅周一至周五"
                                />
                            </el-tooltip>
                        </el-form-item>
                        <el-form-item v-if="tasks.length > 1" style="width: 100px">
                            <el-button size="small" type="danger" @click="deleteTask(idx)">删除</el-button>
                        </el-form-item>
                        <el-form-item label="任务类型" style="width: 300px">
                            <el-input v-model="task.taskType" placeholder="任务类型" style="width: 300px"/>
                        </el-form-item>
                        <br/>
                        <el-form-item label="邮件标题" style="width: 300px">
                            <el-input v-model="task.emailTitle" maxlength="100" show-word-limit placeholder="邮件标题" type="textarea" style="width: 300px"/>
                        </el-form-item>
                        <br/>
                        <el-form-item label="邮件正文" style="width: 600px">
                            <el-input v-model="task.emailContent" maxlength="300" show-word-limit placeholder="邮件正文" type="textarea" style="width: 600px"/>
                        </el-form-item>
                        <el-divider></el-divider>
                    </div>
                </el-form>

                <div style="padding-top: 10px; padding-bottom: 155px; width: 100%">
                    <el-button type="primary" size="large" @click="submitTasks">保存任务</el-button>
                </div>
            </div>
        </el-tab-pane>
    </el-tabs>

</div>

</body>

<script>

    bindApp("app", {
        mounted() {
            if (this.activeTab == "selfConfig") {
                this.getConfig();
            }
        },
        data() {
            return {
                showAddTaskDialog: false,
                addTaskType: "1",
                openJob: false,
                activeTab: "autoWithdraw",
                loginResponseBody: "",
                clockParamBody: "",
                form: {},
                nextClocks: [{
                    "jobTime": ""
                }],
                tasks: [{
                    "idx": 0,
                    "type": "1",
                    "mode": 1,
                    "open": true,
                    "timeSection": "",
                    "precisionDateTime": ""
                }]
            }
        },
        methods: {
            selectMenu,
            withdrawProperty(type) {
                // 提取参数
                var loading = startLoading();
                var propertyStr = this.loginResponseBody;
                if (type == "clockParam") {
                    propertyStr = this.clockParamBody;
                }
                axios.post("/api/withdrawProperty",
                    {
                        "propertyStr": propertyStr,
                        "type": type,
                    })
                    .then(data => {
                        if (data.status == 200 && data.data.code == "200") {
                            showMessage("success", "提取成功");
                            // elementPlus 从 2.4.0 开始不会在更改 activeName 后触发 tab-change，与文档说明不符
                            // this.activeTab = "selfConfig";
                            document.getElementById("tab-selfConfig").click();
                        } else {
                            showMessage("error", JSON.stringify(data.data ? data.data : data))
                        }
                        loading.close();
                    })
                    .catch(ex => {
                        showMessage("error", JSON.stringify(ex));
                        loading.close();
                    });
            },
            tabChange(tabName) {
                if (tabName == "selfConfig") {
                    this.getConfig()
                } else if (tabName == "jobConfig") {
                    this.getJobConfig();
                }
            },
            getConfig() {
                var loading = startLoading();
                axios.post("/api/config/[[${userId}]]")
                    .then((data) => {
                        data = data.data;
                        if (!data || !data.code || data.code != 200) {
                            showMessage("error", data.message);
                        } else {
                            this.form = {};
                            this.form = data.data;
                        }
                        loading.close();
                    })
                    .catch(ex => {
                        showMessage("error", JSON.stringify(ex));
                        loading.close();
                    });
            },
            whetherOpenJob(openJob) {
                var loading = startLoading();
                axios.post("/api/openJob", {
                    openJob: openJob
                })
                    .then(data => {
                        loading.close();
                        if (data.status == 200 && data.data.code == "200") {
                            showMessage("success", (openJob ? "开启" : "关闭") + "成功");
                            this.getJobConfig();
                        } else {
                            showMessage("error", JSON.stringify(data.data ? data.data : data));
                        }
                    })
                    .catch(ex => {
                        loading.close();
                        showMessage("error", JSON.stringify(ex));
                    })
            },
            submitProperty() {
                var loading = startLoading();
                axios.post("/api/selfConfig", this.form)
                    .then((data) => {
                        data = data.data;
                        if (!data || !data.code || data.code != 200) {
                            showMessage("error", data.message);
                        } else {
                            showMessage("success", "提交成功");
                        }
                        this.getConfig();
                        loading.close();
                    })
                    .catch(ex => {
                        this.getConfig();
                        showMessage("error", JSON.stringify(ex));
                        loading.close();
                    });
            },
            changeTaskTime(val) {
                // debugger
                // alert(JSON.stringify(val))
            },
            selectTaskType() {
                this.tasks.push({
                    "idx": this.tasks.length,
                    "type": this.addTaskType,
                    "mode": 1,
                    "open": true,
                    "timeSection": "",
                    "precisionDateTime": ""
                });
                this.showAddTaskDialog = false;
            },
            deleteTask(idx) {
                if (this.tasks.length == 1) {
                    showMessage("error", "最后一条任务不允许删除，请关闭定时打卡");
                }
                ElementPlus.ElMessageBox.confirm(
                    '确认删除?',
                    '警告',
                    {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'error',
                    })
                    .then(() => {
                        this.tasks.splice(idx, 1);
                        showMessage("info", "请点击保存");
                    });
            },
            submitTasks() {
                var loading = startLoading();
                for (var i = 0; i < this.tasks.length; i++) {
                    const task = this.tasks[i];
                    task.idx = i;
                }
                axios.post("/api/submitTasks", this.tasks)
                    .then(data => {
                        loading.close();
                        if (data.status == 200 && data.data.code == "200") {
                            showMessage("success", "保存成功");
                            this.getJobConfig();
                        } else {
                            showMessage("error", JSON.stringify(data.data ? data.data : data));
                        }
                    })
                    .catch(ex => {
                        loading.close();
                        showMessage("error", JSON.stringify(ex));
                    })
            },
            getJobConfig() {
                var loading = startLoading();
                axios.post("/api/getJobConfig")
                    .then(data => {
                        if (data.status == 200 && data.data.code == "200") {
                            data = data.data.data;
                            this.openJob = data.executeJob;
                            this.tasks = data.taskTriggers && data.taskTriggers.length > 0 ?
                                data.taskTriggers : [{type: "1", mode: 1}];
                            this.nextClocks = data.executeForecasts;
                        } else {
                            showMessage("error", JSON.stringify(data.data ? data.data : data));
                        }
                        loading.close();
                    })
                    .catch(ex => {
                        loading.close();
                        showMessage("error", JSON.stringify(ex));
                    })
            }
        }
    })

</script>

</html>